<template>
  <el-dialog :visible.sync="cloneVisible"
             class="bots-clone_widget"
             :title="$t('custom.bots.cloneBots')"
             :append-to-body="true"
             @closed="closeClone"
             width="470px">
<!--    <p>You can directly use all the configuration of the widget, or you can reset the settings</p>-->
    <el-form :model="cloneDataInfo"
             ref="cloneForm"
             :inline="true"
             :rules="dataRule"
             v-loading="cloneLoading">
      <el-form-item prop="name"
                    :label="$t('custom.dataset.name')">
        <el-input v-model="cloneDataInfo.name"
                  :placeholder="$t('custom.dataset.name')"></el-input>
      </el-form-item>
      <el-form-item prop="roleIdList"
                    :label="$t('user.role')">
        <el-select v-model="cloneDataInfo.roleIdList"
                   filterable
                   clearable
                   multiple
                   collapse-tags
                   default-first-option
                   :placeholder="$t('custom.tenant.assignRole.selectRole')"
                   style="width: 100%;">
          <el-option v-for="(item,index) in roleList"
                     :key="index"
                     :value="item.roleId"
                     :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="description"
                    :label="$t('custom.reports.description')">
        <el-input v-model="cloneDataInfo.description"
                  @keyup.enter.native.stop
                  type="textarea"
                  v-if="cloneVisible"
                  rows="3"
                  :placeholder="$t('custom.reports.description')"></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="closeClone"
                 size="small">{{ $t('cancel') }}
      </el-button>
      <el-button type="primary"
                 size="small"
                 @click="sumbitClone('cloneForm')">{{ $t('confirm') }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'bot-clone',
  props: ['cloneVisible'],
  data () {
    return {
      cloneDataInfo: {
        id: null,
        name: null,
        tenantCode: this.$store.state.user.tenantCode,
        businessType: 'Custom',
        status: 'Published',
        description: ''
      },
      dataRule: {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur', pattern: '[^ \x22]+' },
          { validator: this.validatePass, trigger: 'blur' }
        ],
        roleIdList: [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ],
        description: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      },
      cloneLoading: false,
      roleList: []
    }
  },
  methods: {
    closeClone () {
      this.$refs.cloneForm.clearValidate()
      this.$refs.cloneForm.resetFields()
      this.$emit('update:cloneVisible', false)
    },
    getRoleList () {
      const params = {
        tenantCode: this.$store.state.user.tenantCode
      }
      this.$interface.system.getClientRoleListApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.roleList = res.data
      }).catch(() => {})
    },
    sumbitClone () {
      this.$emit('submitClone')
    }
  },
  created () {
    this.getRoleList()
  }
}
</script>

<style lang="scss">
.bots-clone_widget {
  .el-dialog {
    background-image: url("#{$--ossLink}/app/other/add_report_bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .el-form-item {
      display: block;
      .el-form-item__content {
        display: block;
      }
    }
  }
  p {
    width: 340px;
    margin-top: 0;
  }
}
</style>
